<template>
	<d2-container>
		<template slot="header">
			<el-form ref="queryForm" class="header-area" :model="queryForm" label-width="100px" style="height: auto">
				<template>
					<el-row>
						<el-col :span="4">
							<el-form-item label="库存编号" prop="stockNo">
								<el-input type="text" v-model="queryForm.stockNo" placeholder="请输入库存编号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="商品名称" prop="productName">
								<el-input type="text" v-model="queryForm.productName" placeholder="请输入商品名称"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="4">
							<el-form-item label="商品编码" prop="productCode">
								<el-input type="text" v-model="queryForm.productCode" placeholder="请输入商品编码"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="4">
							<el-form-item label="SKU名称" prop="skuName">
								<el-input type="text" v-model="queryForm.skuName" placeholder="请输入SKU名称"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="4">
							<el-form-item label="SKU编码" prop="skuCode">
								<el-input type="text" v-model="queryForm.skuCode" placeholder="请输入SKU编码"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="4">
							<el-form-item label="SKU条形码" prop="barCode">
								<el-input type="text" v-model="queryForm.barCode" placeholder="请输入SKU条形码"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row>
            <el-col :span="4">
						 <el-form-item label="库存类型" prop="stockType">
							<el-select v-model="queryForm.stockType" placeholder="请选择库存类型" style="width:100%">
								<el-option label="全部" value=""></el-option>
								<el-option label="线下库存" value="1"></el-option>
								<el-option label="线上库存" value="2"></el-option>
							</el-select>
						 </el-form-item>
					  </el-col>
            <el-col :span="4">
							<el-form-item label="门店名称" prop="shopName">
								<el-input type="text" v-model="queryForm.shopName" placeholder="请输入门店名称"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="4">
							<el-form-item label="仓库名称" prop="repositoryName">
								<el-input type="text" v-model="queryForm.repositoryName" placeholder="请输入仓库名称"></el-input>
							</el-form-item>
						</el-col>
					<el-col :span="8">
						<el-form-item label="创建时间" prop="time">
							<el-date-picker
									v-model="time"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
									:default-time="['00:00:00', '23:59:59']"
									 style="width:100%"
								></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
				</template>
			</el-form>
		</template>
		<template>
			<el-table stripe border :data="tableData" style="width: 100%">
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column prop="stockNo" label="库存编号"></el-table-column>
				<el-table-column prop="productName" label="商品名称"></el-table-column>
				<el-table-column prop="productCode" label="商品编码"></el-table-column>
				<el-table-column prop="skuName" label="SKU名称"></el-table-column>
				<el-table-column prop="skuCode" label="SKU编码"></el-table-column>
				<el-table-column prop="barCode" label="SKU条形码"></el-table-column>
        <el-table-column prop="skuUnitName" label="单位"></el-table-column>
				<el-table-column prop="stockType" label="库存类型" width="92">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.stockType == 1">线下库存</el-tag>
						<el-tag v-if="scope.row.stockType == 2">线上库存</el-tag>
					</template>
				</el-table-column>
        <el-table-column prop="shopName" label="门店名称"></el-table-column>
				<el-table-column prop="repositoryName" label="仓库名称"></el-table-column>
        <!-- <el-table-column prop="stockHistory" label="累计库存"></el-table-column> -->
        <el-table-column prop="cumulativeTotal" label="累计库存"></el-table-column>
        <el-table-column prop="stockTotal" label="总库存"></el-table-column>
        <el-table-column prop="stock" label="可用库存"></el-table-column>
        <el-table-column prop="stockFrozen" label="冻结库存"></el-table-column>
        <el-table-column prop="stockSafe" label="安全库存"></el-table-column>
        <el-table-column prop="stockWarning" label="预警库存"></el-table-column>
        <el-table-column prop="stockOutHistory" label="累计出库"></el-table-column>
        <el-table-column prop="returnQuantity" label="退货数量"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="100" :formatter="forDateCteate"></el-table-column>
			</el-table>
		</template>
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
	</d2-container>
</template>

<script>
import { findStockListByPage } from '@api/stock/stock'
import dayjs from 'dayjs'

export default {
  name: 'stock-stockList',
  data () {
    return {
      queryForm: {
        stockNo: '',
        productName: '',
        productCode: '',
        skuName: '',
        skuCode: '',
        barCode: '',
        stockType: '',
        shopName: '',
        repositoryName: '',
        startTime: '',
        endTime: ''
      },
      time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
	    tableData: [],
	    currentPage: 1,
	    pageSize: 10,
	    total: 0,
	    multipleSelection: [],
    }
  },

  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.loading = true
      this.queryForm.startTime = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryForm.endTime = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss')
      findStockListByPage({
        stockNo: this.queryForm.stockNo,
        productName: this.queryForm.productName,
        productCode: this.queryForm.productCode,
        skuName: this.queryForm.skuName,
        skuCode: this.queryForm.skuCode,
        barCode: this.queryForm.barCode,
        stockType: this.queryForm.stockType,
        shopName: this.queryForm.shopName,
        repositoryName: this.queryForm.repositoryName,
        startTime: this.queryForm.startTime,
        endTime: this.queryForm.endTime,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
        .then(res => {
          this.tableData = res.data.content
          this.total = res.data.total
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.fetchData()
    },
    forDateCteate (row, column) {
      return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    resetPage () {
      (this.currentPage = 1), (this.pageSize = 10), (this.total = 0)
    },
    submitForm (formName) {
      this.resetPage()
      this.fetchData()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.time = []
      this.resetPage()
      this.fetchData()
    }
  }
}
</script>